body{
    overflow: hidden;
}
header{
    display: flex;
    z-index: 150;
}
header >.mid{
    flex:1;
}
#ICON{
    padding: 0 20px;
    margin:0 10px;
    display: flex;
    align-items: center;
    justify-content:center;
}
#version{
    padding:0 20px;
    border-style: none;
    outline-style: none;
    font-size:small;
    margin:0 10px
}

main{
    display: flex;
    flex: 1;
}
#sideBar{
    width:250px;
    height: 100%;
    transition: .5s;
}
#sideBar *{
    transition:.5s;
}
#md{
    margin:0 auto;
}
.hideAndShow{
    width:0!important;
}
.hideAndShow *{
    opacity:0;
}
details{
    outline-style:none;
    border-style:none ;
    cursor: pointer;
    border:0px ;
    padding-left:10px;
}

#sideBar >h3{
    
    text-align: center;
    border-bottom: 2px solid #b9b9b9;

}
#sideBarShow{
    background-color: #b9b9b9;
    width:5px;
    height: 100%;
    cursor: pointer;
}

#toc{
    padding-left: 24px;
     overflow: scroll;
    height: 90%;
    margin-top:20px;
    user-select: none;
}
.animate__fadeInUp{
    animation-duration: 1s; 
}
.displayNone{
    display:none
}
#toc span{
    display:flex;
    padding: 2px 0;
    transition:.2s;
    text-shadow: 2px 1px 3px #b9b9b9;
}
#toc span::after{
    content: "";
    background-color:#ea6281;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 2px 1px 5px #b9b9b9;
}
#toc span:hover{
    color:#707bff;
}

#version{
    cursor: pointer;
}